import React from 'react';
import { withRouter } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import PropTypes from 'prop-types'

import User from '../../../stores/user_store'
import './index.scss';
import commFuc from '../../../util/comm';

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class UserRegist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      passwordConfirm: '',
      email: '',
      name: '',
    }
    this.check = this.check.bind(this)
    this.inputChange = this.inputChange.bind(this)
    this.submit = this.submit.bind(this)
  }
  componentDidMount() {

  }
  // 表单验证
  check() {
    const { validate } = commFuc;
    const error = 'error'
    const right = 'right'
    const temp = {
      usernameClass: validate(this.state.username, 'require') ? right : error,
      passwordClass: validate(this.state.password, 'require') ? right : error,
      passwordConfirmClass: validate(this.state.passwordConfirm, 'require') && this.state.password === this.state.passwordConfirm ? right : error,
      emailClass: validate(this.state.email, 'email') ? right : error,
    }
    this.setState(temp)
    for (const item in temp) { //eslint-disable-line
      if (temp[item] === error) {
        return false
      }
    }
    return true
  }
  inputChange(e) {
    const input = e.target;
    const temp = {};
    temp[input.name] = input.value;
    this.setState(temp, this.check);
  }
  submit() {
    if (this.check()) {
      const params = {
        username: this.state.username,
        password: this.state.password,
        email: this.state.email,
        nickname: this.state.nickname,
      }
      this.props.user.regist(params)
        .then((res) => {
          if (res.code === 1) {
            if (window.confirm('注册成功，现在去登录?')) {
              this.props.history.push('/user/login')
            }
          } else {
            commFuc.errorTip(res.message)
          }
        }).catch(e => console.log(e)) //eslint-disable-line
    }
  }
  render() {
    return (
      <div className="user-regist">
        <div className="clear" style={{ height: 0, overflow: 'hidden', position: 'absolute' }}>
          <input type="text" name="userNameClear" />
          <input name="passwordClear" type="password" />
        </div>
        <div className="form-item">
          <label htmlFor="username">用户名:</label>
          <span className="require-tip">
            *
          </span>
          <input type="text" name="username" className={this.state.usernameClass} placeholder="请输入用户名" onBlur={this.check} onChange={this.inputChange} />
        </div>
        <div className="form-item">
          <label htmlFor="password">密码:</label>
          <span className="require-tip">
            *
          </span>
          <input name="password" className={this.state.passwordClass} type="password" placeholder="请输入密码" onBlur={this.check} onChange={this.inputChange} />
        </div>
        <div className="form-item">
          <label htmlFor="passwordConfirm">确认密码:</label>
          <span className="require-tip">
            *
          </span>
          <input name="passwordConfirm" className={this.state.passwordConfirmClass} type="password" placeholder="请再次确认密码" onBlur={this.check} onInput={this.inputChange} />
        </div>
        <div className="form-item">
          <label htmlFor="emai">邮箱:</label>
          <span className="require-tip">
            *
          </span>
          <input type="text" name="email" className={this.state.emailClass} placeholder="请输入邮箱" onBlur={this.check} onChange={this.inputChange} />
        </div>
        <div className="form-item">
          <label htmlFor="name">昵称:</label>
          <span className="require-tip" />
          <input type="text" name="name" placeholder="请输入用户昵称" onChange={this.inputChange} />
        </div>
        <div className="form-item">
          {<button className="regist-btn" onClick={this.submit}>确认注册</button>}
        </div>
      </div>
    )
  }
}
export default withRouter(UserRegist);
UserRegist.propTypes = {
  user: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
}
